<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单管理 | 后台管理 </title>
    <link rel="stylesheet" type="text/css" href="./../element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="./../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../components/admin-frame.css" />
    <link rel="stylesheet" type="text/css" href="./../components/min-width-container.css"/>
	<style>
		#app{
			height: 100%;
		}
		
		.app-search{
			display: flex;
			align-items: center;
			height:65px;
		}
		
		#app .el-button--primary{
			background-color: #3C8DBC;
			border-color: #3C8DBC;
		}
		
    </style>
</head>
<body>
<div id="app">
	<admin-frame  active="3" title="订单管理">
		<min-width-container>
			<div class="m-t-8 m-b-8">
		        <div class="app-title text-2 text-important">订单列表</div>
		    </div>
		    <div class="app-search">
		        <div class="bold m-r-20">商品编号:</div>
				<div><el-input v-model="search_content" placeholder="请输入订单编号" style="width: 245px;"></el-input></div>
				<div class="m-l-16"><el-button type="primary" size="mini" @click="search_order">查询</el-button></div>
				<div style="flex-grow: 1;"></div>
		    </div>
		    <div>
		        <template>
		            <el-table
		                    :data="orders"
		                    border
		                    style="width: 100%">
		                <el-table-column
		                        fixed
		                        prop="orderNo"
		                        label="订单编号"
		                        width="200">
		                </el-table-column>
		                <el-table-column
		                        prop="addr.name"
		                        label="收件人"
		                        width="100">
		                </el-table-column>
		                <el-table-column
		                        prop="statusDesc"
		                        label="订单状态"
		                        width="100">
		                </el-table-column>
						<el-table-column
								label="收货信息">
							<template slot-scope="scope">
								{{scope.row.addr.province}} {{scope.row.addr.city}} {{scope.row.addr.district}} {{scope.row.addr.addr}} {{scope.row.addr.zip}}
								{{scope.row.addr.mobile}}
							</template>
						</el-table-column>
		                <el-table-column
		                        prop="amount"
		                        label="总金额"
		                        width="100">
		                </el-table-column>
		                <el-table-column
		                        prop="createTime"
		                        label="创建时间"
		                        width="180">
		                </el-table-column>
		                <el-table-column
		                        fixed="right"
		                        label="操作"
		                        width="100">
		                    <template slot-scope="scope">
		                        <el-button type="text" size="small" @click="dialogFormVisible = true, dialogFormItem = scope.row">查看商品</el-button>
		                    </template>
		                </el-table-column>
		            </el-table>
		        </template>
		    </div>
		
		</min-width-container>
	</admin-frame>
	<el-dialog title="查看订单包含的商品信息" :visible.sync="dialogFormVisible" width="640px">
		<el-table
				:data="dialogFormItem.orderItems"
				border
				style="width: 100%">
			<el-table-column
					fixed
					prop="commodityName"
					label="商品名称">
			</el-table-column>
			<el-table-column
					prop="curPrice"
					label="价格"
					width="100">
			</el-table-column>
			<el-table-column
					prop="quantity"
					label="数量"
					width="100">
			</el-table-column>
			</el-table-column>
			<el-table-column
					prop="totalPrice"
					label="总金额"
					width="100">
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<el-button v-if="dialogFormItem.statusDesc === '已付款'" type="primary" size="mini" @click="deliver_order(dialogFormItem)" >已发货</el-button>
			<el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
		</div>
	</el-dialog>
</div>
<script src="./../js/vue.js"></script>
<script src="./../js/axios.min.js"></script>
<script src="./../element-ui/index.js"></script>
<script src="../components/admin-frame.js"></script>
<script src="./../components/min-width-container.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data(){
            return {
                orders: [],
				search_content: '',
				dialogFormVisible: false,
				dialogFormItem: {
					addr: {},
					orderItems: []
				}
            };
        },
        created(){
        	this.load_orders();
        },
        methods: {
            search(){
                window.location.href = "/admin/order.html";
            },
            load_orders(){
            	axios.post("/mgr/order/findorders.do").then(response=>{
            		if(response.data.status === 0){
            			this.orders = response.data.data;
            		}else{
            			if(response.data.msg){
            				this.$message.error(response.data.msg);
            			}
            		}
            	}).catch(err=>{
            		console.log(err);
					this.$message.error("连接服务器异常");
            	});
            },
            search_order(){
            	const keyword = this.search_content.trim();
				if(keyword === ''){
					this.load_orders();
				}else if(/^\d+$/.test(keyword)){
					const params = new URLSearchParams();
					params.append("orderNo", (keyword));
					axios.post("/mgr/order/search.do", params).then(response=>{
						if(response.data.status === 0){
							this.orders = [response.data.data];
						}else{
							if(response.data.msg){
								this.$message.error(response.data.msg);
							}
						}
					}).catch(err=>{
						console.log(err);
						this.$message.error("连接服务器异常");
					});
				}else{
					this.$message.info("请输入订单编号");
				}
            },
            deliver_order(item){
            	const params = new URLSearchParams();
				params.append("orderNo", item.orderNo);
				axios.post("/mgr/order/deliverreceipt.do", params).then(response=>{
					if(response.data.status === 0){
						this.$message({
							message: "发货成功",
							type: "success"
						});
						item.statusDesc = "已发货";
						this.dialogFormVisible = false;
					}else{
						if(response.data.msg){
							this.$message.error(response.data.msg);
						}
					}
				}).catch(err=>{
					console.log(err);
					this.$message.error("连接服务器异常");
				});
            }
        },
    });
</script>
</body>
</html>
